<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title>酷狗520</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" type="text/css" href="../css/index.css" />
	</head>
	<body>
		<div class="wrap">
			<div id="page_load">
				<!--人物-->
				<div class="load_figure">
					<img src="../img/load/load_figure.png" />
				</div>
				<!--火箭-->
				<div class="load_rocket rocket_active">
					<img src="../img/load/rocket.png" />
				</div>
				<!--谷歌旗帜-->
				<div class="load_flag">
					<img src="../img/load/flag.png" />
				</div>
				<!--星球-->
				<div class="load_star">
					<img src="../img/load/star.png" />
				</div>
				<!--提示牌-->
				<div class="load_sign active">
					<img src="../img/load/sign.png" />
				</div>
				<!--跳过按钮-->
				<button class="load_btn active"></button>
			</div>
			<!--首页S-->
			<div id="page_home">
				<div class="home_logo active"></div>
				<!--主题标题-->
				<div class="home_theme active">
					<img src="../img/index/theme.png" alt="60秒猜歌排位赛" />
				</div>
				<!--嘴巴-->
				<div class="home_mouth">
					<img src="../img/index/mouth.png" alt="" />
				</div>
				<div class="home_mouth_center">
					<img src="../img/index/mouth_center.png" alt="" />
				</div>
				<!--首页人物-->
				<div class="home_pro">
					<img src="../img/index/left_blue.png" />
				</div>
				<div class="home_man_left">
					<img src="../img/index/manleft.png" />
				</div>
				<div class="home_man_right">
					<img src="../img/index/manright.png" />
				</div>
				<!--开始按钮-->
				<button class="home_begin active"></button>
			</div>
			<!--首页E-->
			<!--猜歌开始-->
			<div class="page_music">

				<audio class="myaudio" src="" autoplay="autoplay">

				</audio>

				<!--老歌开始-->
				<div class="old_music">
					<div class="old_man">
						<img src="../img/music/oldsong_oldman.png" />
					</div>
					<div class="light">
						<img src="../img/music/oldsong_lamplight.png" />
					</div>
					<div class="flower">
						<img src="../img/music/oldsong_flower.png" />
					</div>

				</div>
				<!--老歌结束-->

				<!--流行音乐开始-->
				<div class="popular_music">
					<div class="flower_man">
						<img src="" data-src="../img/music/fashion01.png" />
					</div>
					<div class="beach_woman">
						<img src="" data-src="../img/music/fashion02.png" />
					</div>
					<div class="woman_talk">
						<img src="" data-src="../img/music/fashion03.png" />
					</div>
				</div>
				<!--流行音乐结束-->

				<!--摇滚音乐开始-->
				<div class="rock_music">
					<div class="light">
						<img src="" data-src="../img/music/rock_head.png" />
					</div>
					<div class="diban">
						<img src="" data-src="../img/music/rock_center.png" />
					</div>
					<div class="singer">
						<img src="" data-src="../img/music/rock_man.png" />
					</div>
					<div class="audience_left">
						<img src="" data-src="../img/music/rock_leftman.png" />
					</div>
					<div class="audience_right">
						<img src="" data-src="../img/music/rock_rightman.png" />
					</div>
					<div class="audlf_talk">
						<img src="" data-src="../img/music/left_text.png" />
					</div>
					<div class="audrg_talk">
						<img src="" data-src="../img/music/right_text.png" />
					</div>
				</div>
				<!--摇滚音乐结束-->

				<!--电影歌曲音乐开始-->
				<div class="movie_music">
					<div class="man_woman">
						<img src="" data-src="../img/music/movie_figure.png" />
					</div>
					<div class="wall">
						<img src="" data-src="../img/music/movie_wall.png" />
					</div>
					<div class="zixia_talk">
						<img src="" data-src="../img/music/movie_character.png" />
					</div>
				</div>
				<!--电影歌曲音乐结束-->

				<!--经典音乐开始-->
				<div class="classic_music">
					<div class="light">
						<img src="" data-src="../img/music/classics_lamplight.png" />
					</div>
					<div class="grid">
						<img src="" data-src="../img/music/classics_grid.png" />
					</div>
					<div class="people">
						<img src="" data-src="../img/music/classics_figure.png" />
					</div>
					<div class="soap_man">
						<img src="" data-src="../img/music/classics_soap.png" />
					</div>
					<div class="baffle_left">
						<img src="" data-src="../img/music/classics_baffle2.png" />
					</div>
					<div class="baffle_right">
						<img src="" data-src="../img/music/classics_baffle.png" />
					</div>

				</div>
				<!--经典音乐结束-->

				<!--车载音乐开始-->
				<div class="car_music">
					<div class="light">
						<img src="" data-src="../img/music/classics_lamplight.png" />
					</div>
					<div class="car">
						<img src="" data-src="../img/music/r&b_car.png" />
					</div>
					<div class="yao_text">
						<img src="" data-src="../img/music/r&b_character.png" />
					</div>
					<div class="flow_right">
						<img src="" data-src="../img/music/r&b_flower.png" />
					</div>
				</div>
				<!--车载音乐结束-->

				<!--音乐选项操作开始-->
				<div class="music_order">
					<div class="item_a item">
						<button class="bt_aitem"></button>
					</div>
					<div class="item_b item">
						<button class="bt_bitem"></button>
					</div>
					<div class="item_c item">
						<button class="bt_citem"></button>
					</div>

					<div class="music_time">
						<span>60s</span>
					</div>

					<div class="next_music">
						<br>下<br>一<br>首
					</div>
				</div>
				<!--音乐选项操作结束-->
			</div>
			<!--猜歌结束-->
			<div id="page_result">
				<div class="result_name">
					<div class="name_bg"></div>
					<img class="portrait" src="../img/result/portrait.png" />
					<span class="name">咸猪手</span>
				</div>
				<div class="logo active"></div>
				<!--勋章-->
				<div class="result_medal center">
					<img src="../img/result/medal01.png" />
				</div>
				<!--猜中数量-->
				<div class="result_sum center">猜中8首 </div>
				<!--评价语-->
				<div class="result_text center">失敬失敬！十二星座黄金“音”斗士， 你是哪一宫？向你的基友们寄送挑战书吧！ </div>
				<!--左边按钮-->
				<div class="result_nextbtn">再次挑战 </div>
				<div class="result_sharebtn">分享朋友圈 </div>
				<!--排名标题-->
				<div class="result_rank_title center">
					<img src="../img/result/rank_title.png" />
				</div>
				<!--排名-->
				<div class="result_rank center">
					<ul>
						<li class="clearfix">
							<div class="fl">
								<span class="rank_num">1</span>
								<div class="rank_portrait"><img src="../img/result/portrait1.jpg" /></div>
								<span class="rank_name">咸猪手</span>
							</div>
							<div class="fr">
								<span class="rank_gad">黄金</span>
								<div class="rank_medal"><img src="../img/result/medal01.png" /></div>
							</div>
						</li>
						<li class="clearfix">
							<div class="fl">
								<span class="rank_num">2</span>
								<div class="rank_portrait"><img src="../img/result/portrait1.jpg" /></div>
								<span class="rank_name">咸猪手</span>
							</div>
							<div class="fr">
								<span class="rank_gad">黄金</span>
								<div class="rank_medal"><img src="../img/result/medal01.png" /></div>
							</div>
						</li>
						<li class="clearfix">
							<div class="fl">
								<span class="rank_num">3</span>
								<div class="rank_portrait"><img src="../img/result/portrait1.jpg" /></div>
								<span class="rank_name">咸猪手</span>
							</div>
							<div class="fr">
								<span class="rank_gad">黄金</span>
								<div class="rank_medal"><img src="../img/result/medal01.png" /></div>
							</div>
						</li>
					</ul>
				</div>
			</div>
		</div>
		<script type="text/javascript" src="../js/js.pagebest.js"></script>
		<script type="text/javascript" src="../js/js.pagebest.js"></script>
		<script type="text/javascript" src="../js/jquery-2.1.0.js"></script>
		<script type="text/javascript" src="../js/js.control.js"></script>
		<script type="text/javascript" src="../js/js.addmusic.js"></script>
	</body>

</html>